<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2021-03-16 09:48:46
 * @LastEditors: OBKoro1
 * @LastEditTime: 2023-02-17 10:38:40
-->
<template>
  <div id="mileageEcharts" style="width: 100%; height: 40%"></div>

  <el-row style="height: 60%">
    <el-divider style="background-color: #fff; margin: 10px 0px" />

    <el-col :span="17" style="height: 95%">
      <div id="sectionCharts" style="width: 100%; height: 100%"></div>
    </el-col>
    <el-col :span="7" style="height: 95%">
      <el-form-item label="选择断面">
        <el-select
          v-model="selectSection"
          placeholder=""
          filterable
          @change="sectionChange"
        >
          <el-option
            v-for="(item, i) in props.sectionDataList"
            :key="i"
            :value="item.name"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-tabs>
        <el-tab-pane label="断面数据">
          <el-table
            border
            stripe
            size="small"
            :data="sectionTableData"
            style="width: 100%"
            max-height="255px"
          >
            <el-table-column label="起点距(m)" prop="starting" align="center" />
            <el-table-column label="高程(m)" prop="elevation" align="center" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="河道数据">
          <div class="objData">
            <div>河流名称:{{ sectionMsgData.riverName }}</div>
            <div>断面名称:{{ sectionMsgData.name }}</div>
            <div>距河口里程:{{ sectionMsgData.mileage }}</div>
            <div>节点数:{{ sectionMsgData.sectionDataLength }}</div>
            <div>最低点:{{ sectionMsgData.minData }}</div>
            <div>最高点:{{ sectionMsgData.maxData }}</div>
            <div>河道宽度:{{ sectionMsgData.width }}</div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import {
  ref,
  defineComponent,
  reactive,
  inject,
  toRefs,
  watch,
  provide,
  onMounted,
} from "vue";
import { cloneDeep } from "lodash-es";
import * as echarts from "echarts";

export default defineComponent({
  name: "sectionEcharts",
  props: {
    // 当前河道断面数据
    sectionDataList: {
      type: Object,
      default: () => [],
    },
    // 当前选择河道对象
    selectRiverData: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  setup: (props) => {
    const state = reactive({
      // 用户所选展示断面
      selectSection: "",

      // 断面表格数据
      sectionTableData: [],
      // 当前断面河道数据
      sectionMsgData: {
        sectionDataLength: "",
        riverName: "",
        name: "",
        mileage: "",
        minData: "",
        maxData: "",
        width: "",
      },
    });

    // 监听树状图所选河道变化
    watch(
      () => props.selectRiverData,
      (value) => {
        if (props.sectionDataList.length != 0) {
          const initSectionData = props.sectionDataList[0];

          // 初始化里程关系图
          mileageEchartsInit(initSectionData);

          // 初始化断面示意图
          sectionEchartsInit(initSectionData);

          // 初始化断面选择框
          state.selectSection = initSectionData.name;
        }
      },
      { deep: true }
    );

    onMounted(() => {});

    /**
     * @description: 生成里程关系图表
     * @param {*} markPoint 当前所选断面
     * @return {*}
     */
    function mileageEchartsInit(markPoint) {
      const elem: any = document.getElementById("mileageEcharts");

      elem.removeAttribute("_echarts_instance_");

      let myChart: any = echarts.getInstanceByDom(elem);

      if (myChart == undefined) {
        myChart = echarts.init(elem);
      }

      const markPointData = {
        coord: [(markPoint.mileage / 1000).toString(), markPoint.width],
        value: markPoint.name,
      };

      // 指定图表的配置项和数据
      const option = {
        legend: {},
        tooltip: {
          trigger: "axis",
          hideDelay: 2000,
          formatter: (value) => {
            return `
              断面名称：${value[0].data[2]}
              <br />
              断面宽度：${value[0].data[1]}m
              <br />
              距河口里程：${value[0].data[0]}km
            `;
          },
        },
        grid: {
          left: 10,
          bottom: 0,
          right: 110,
          top: 50,
          containLabel: true,
        },
        xAxis: {
          name: "距河口里程(km)",
          nameLocation: "end",
          axisTick: {
            show: true,
            inside: true,
          },
        },
        yAxis: {
          name: "深泓线(m)",
          nameLocation: "end",
          type: "value",
          axisLine: {
            onZero: false,
          },
          axisTick: {
            show: true,
            inside: true,
          },
          min: (value) => {
            return Math.round(value.min * 0.99);
          },
          max: (value) => {
            return Math.round(value.max * 1.01);
          },
        },
        series: [
          {
            type: "line",
            symbol: "none",
            data: props.sectionDataList.map((item) => [
              item.mileage / 1000,
              item.width,
              item.name,
            ]),
            markPoint: {
              data: [markPointData],
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }

    /**
     * @description: 生成断面示意图
     * @param {*} initSectionData 当前断面数据
     * @return {*}
     */
    function sectionEchartsInit(initSectionData) {
      const elem: any = document.getElementById("sectionCharts");

      elem.removeAttribute("_echarts_instance_");

      let myChart: any = echarts.getInstanceByDom(elem);

      if (myChart == undefined) {
        myChart = echarts.init(elem);
      }

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: `断面${initSectionData.name}示意图`,
          left: "center",
        },
        tooltip: {
          trigger: "axis",

          hideDelay: 2000,
        },
        grid: {
          top: 40,
          left: 10,
          right: 110,
          bottom: 10,
          containLabel: true,
        },
        xAxis: {
          name: "起点距(m)",
          nameLocation: "end",
          axisLine: {
            onZero: false,
          },
          axisTick: {
            show: true,
            inside: true,
          },
          scale: true,
        },
        yAxis: {
          name: "高程(m)",
          nameLocation: "end",
          type: "value",
          axisLine: {
            onZero: false,
          },
          axisTick: {
            show: true,
            inside: true,
          },
          scale: true,
          // min: (value) => {
          //   return Math.round(value.min * 0.99);
          // },
          // max: (value) => {
          //   return Math.round(value.max * 1.01);
          // },
        },

        series: [
          {
            type: "line",
            data: initSectionData.data,
            symbol: "none",
            lineStyle: {
              color: "red",
            },
            itemStyle: {
              color: "red",
            },
          },
        ],
      };

      // 生成断面数据表格
      state.sectionTableData = initSectionData.data.map((item) => {
        return {
          starting: item[0],
          elevation: item[1],
        };
      });

      // 生成断面河道数据
      state.sectionMsgData = initSectionData;
      state.sectionMsgData.sectionDataLength = props.sectionDataList.length;
      state.sectionMsgData.riverName = props.selectRiverData.key;

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }

    /**
     * @description: 断面切换事件
     * @param {*} selectSection 所选断面name
     * @return {*}
     */
    function sectionChange(selectSection) {
      const selectRiverData = props.sectionDataList.find(
        (item) => item.name === selectSection
      );

      // 初始化里程关系图
      mileageEchartsInit(selectRiverData);

      // 初始化断面示意图
      sectionEchartsInit(selectRiverData);
    }

    return {
      ...toRefs(state),
      props,

      // 断面切换事件
      sectionChange,
    };
  },
});
</script>


<style scoped lang="less">
.flRight {
  position: absolute;
  bottom: 0;
  right: 0;
}
.objData {
  padding: 10px;
  line-height: 25px;
}
</style>
